<style scoped>
.post-list{
    margin: 50px;
}
</style>

<template>
    <div class="post-list">
        <ListSection :view_mode="view_mode" @view-mode-changed="change_view_mode">
            <template #title>文章列表</template>
            <template v-if="view_mode==='list'">
                <ListItem v-for="post in posts" :key="post.id" :url="post.url">
                    {{ post.title }}
                </ListItem>
            </template>
            <template v-else>
                <CardItem v-for="post in posts" :key="post.id" :post="post">
                    <template #title>{{ post.title }}</template>
                    <template #action-label>点击查看</template>
                </CardItem>
            </template>
        </ListSection>
    </div>
</template>

<script>
import ListSection from './list/ListSection';
import ListItem from './list/ListItem';
import CardItem from './list/CardItem';

export default{
    components: {ListSection,ListItem,CardItem},
    data() {
        return {
            posts: [],
            view_mode:'list',
        }
    },
    mounted() {
        axios.get('/posts/all').then((resp) => {
            this.posts = resp.data;
        }).catch((error) => {
            console.log('从服务器加载文章错误');
        });
    },
    methods:{
        change_view_mode(mode){
            this.view_mode = mode;
        }
    }
}
</script>
